import React,{Component,PropTypes} from 'react';
import Baselist from 'components/Baselist';
import Crumb from 'components/Crumb'
import OssUpload from "components/OssUpload";
import {redirect,backward} from 'lib/utils';

import moment from 'moment';
import { Form, Select, Input, InputNumber, DatePicker, Button,Card } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const RangePicker = DatePicker.RangePicker;

import API, {} from 'lib/api';

/*     编辑状态数据模拟    */
import banner from 'images/banner.png';

class Add extends Component{
    constructor(props){
        super(props);

        this.state={
            hasImg:true ,       // true ==> 已经上传图片 ==> 关闭错误提示
        }
    };



    componentWillMount(){

    /* ====== 添加 ====== */
        //API.fetch("",{id:id},resp=>{  请求面包屑 //下拉选择项
            const crumb = [
                {href:"/",title:"首页"},
                {href:"/",title:"轮播图列表"},
                {href:"/",title:"添加轮播图"},
            ];

            const select = [
                {option:"手机",value:"phone"},
                {option:"电脑",value:"computer"}
            ]

            this.setState({crumb:crumb,select:select})
        //};




    };



    componentDidMount(){

    /* ====== 编辑 ====== */
        if(this.props.routeParams.id){

            //API.fetch("",{id:id},resp=>{    请求需要编辑的数据 FormData
                const FormData = {
                    img:banner,
                    RangeDate:[
                        moment('2017-11-21 10:11:12','YYYY-MM-DD HH:mm:ss'),
                        moment('2017-11-22 18:11:12','YYYY-MM-DD HH:mm:ss')
                    ]
                };
            //};

            this.props.form.setFieldsValue(FormData);         // 设置表单控价的初始默认值
            this.setState({ img:FormData.img, hasImg:true }); // img:显示请求的图片, hasImg:true 已有图片隐藏提示信息
        }
    };


    // 不可选日期,当天及以前的日期
    disabledDate=(current)=> {
        return current && current.valueOf() < Date.now();
    };


    // 日期变化回调,获取格式化好的日期数据
    onChange=(dates, dateStrings)=> {

        let Date = {start: dateStrings[0], end: dateStrings[1]};
        console.log(Date);
        console.log(this.state.hasImg);
        console.log('From1: ', dateStrings[0], ', to1: ', dateStrings[1]);

        this.setState({Date:Date})
    };


    // 下拉框选择回调
    handleChange=(value)=> {
        console.log(`selected ${value}`);
    };


    // 图片上传回调,关闭错误提示并且显示缩略图
    handlerPic(field){
        this.props.form.setFieldsValue({ img: field });

        let hasImg = false;
        field ? hasImg = true:null;

        this.setState({ img:field, hasImg:hasImg });
    };


    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                const {Date}=this.state;
                values.RangeDate = Date;

                console.log('Received values of form: ', values);

            }else {
                //  必传图片的错误信息提示,是否显示
                if(err.img){
                    this.setState({hasImg:false})
                }else{
                    this.setState({hasImg:true})
                }
            }
        });
    };


    render(){
        const { getFieldDecorator } = this.props.form;
        const {hasImg} = this.state;

        return(
            <Baselist>
                <Crumb crumb={this.state.crumb}/>

                <Card title="Demo"  noHovering={true}>
                    <Form onSubmit={this.handleSubmit}>

                        <FormItem label="日期选择" labelCol={{ span: 4 }} wrapperCol={{ span: 8 }} >
                            {getFieldDecorator('RangeDate', {
                                rules: [{ required: true, message: '请输入日期' }],
                            })(
                                <RangePicker
                                    disabledDate={this.disabledDate}
                                    showTime={{
                                        hideDisabledOptions: true,
                                        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('00:00:00', 'HH:mm:ss')],
                                    }}
                                    onChange={this.onChange}
                                    format="YYYY-MM-DD HH:mm:ss"
                                />
                            )}
                        </FormItem>


                        {/* 必填==> 普通input */}
                        <FormItem label="普通输入框" labelCol={{ span: 4 }} wrapperCol={{ span: 8 }} >
                            {getFieldDecorator('Input', {
                                rules: [{ required: true, message: '请输入文字内容!' }],
                            })(
                                <Input placeholder="请输入文字内容"/>
                            )}
                        </FormItem>


                        {/* 非必填 ==> InputNumber */}
                        <FormItem label="数字输入框" labelCol={{ span: 4 }} wrapperCol={{ span: 8 }} >
                            {getFieldDecorator('InputNumber', {
                                rules: [{ required: true, message: '数字输入框!' }],

                            })(
                                // 精度precision ==> number类型
                                <InputNumber precision={2} min={0}/>
                            )}
                        </FormItem>


                        {/* 非必填 ==> 下拉选项 */}
                        <FormItem label="下拉选项" labelCol={{ span: 4 }} wrapperCol={{ span: 8 }} >
                            {getFieldDecorator('Select', {
                                rules: [{ required: true, message: '请输入下拉选项!' }],

                            })(
                                <Select style={{ width: 120 }} onChange={this.handleChange} placeholder="可选择">
                                    {
                                        this.state.select?
                                            this.state.select.map((v,k)=>(
                                                <Option key={k} value={v.value}>{v.option}</Option>
                                            ))
                                        :null
                                    }
                                </Select>
                            )}
                        </FormItem>


                        <FormItem style={{marginBottom:6}}>
                            {getFieldDecorator('img', {
                                rules: [{ required: true, message: ' ' }],
                            })(
                                <OssUpload default={this.state.img}
                                           onFieldSet={this.handlerPic.bind(this)}
                                           multiple={false}
                                           lable="轮播图片"
                                />
                            )}
                        </FormItem>

                        {/*原有图片上传的必填提示信息,位置不好修改所以另起一行做提示*/}
                        <div className="ant-row ant-form-item oss-upload_elem" style={{visibility:hasImg?"hidden":"visible"}}>
                            <label className="ant-form-item-label ant-col-xs-24 ant-col-sm-4">  </label>
                            <div className="ant-col-8 ant-form-item-control-wrapper" style={{color: "#f04134"}}>请选择图片</div>
                        </div>

                        <FormItem wrapperCol={{ span: 8, offset: 4 }} >
                            <Button type="primary" htmlType="submit"> 保存</Button>
                        </FormItem>
                    </Form>
                </Card>
            </Baselist>
        )
    }
}


export default Form.create()(Add);